<template>
  <div id="app">
    <div class="data-cards">
      <div class="data-card">
        <Users v-model="selectedUser" :users="UserModel.allUsers"></Users>
      </div>
      <div class="data-card">
        <Books v-model="selectedBook" :books="selectedUser.books"></Books>
      </div>
      <div class="data-card">
        <EditUser v-model="selectedUser"></EditUser>
      </div>
      <div class="data-card">
        <EditBook v-model="selectedBook" :userId="selectedUser.id"></EditBook>
      </div>
    </div>
  </div>
</template>

<script>
import Users from './components/Users/index.vue'
import Books from './components/Books/index.vue'
import EditUser from './components/Users/edit.vue'
import EditBook from './components/Books/edit.vue'

import { UserModel } from './models'

export default {
  name: 'app',
  components: {
    Users,
    Books,
    EditUser,
    EditBook,
  },
  data() {
    return {
      UserModel,
      selectedUser: {id: null, books: []},
      selectedBook: {name: null},
    }
  },
  mounted() {
  },
  methods: {
  },
}
</script>

<style lang="less" scoped>
.data-cards {
  display: flex;
  justify-content: flex-start;

  .data-card {
    & + .data-card {
      margin-left: 50px;
    }
  }
}
</style>
